<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国传统的家规</title>
    <link rel="stylesheet" href="css/jfjx_family.css">
    <link rel="stylesheet" href="css/galleryview.css">
</head>
<body>
<div class="container">
    <div class="container_con">
        <div class="container_con_top" style="background: url('images/jfjx_back.jpg') no-repeat">
            <div class="con_top1">
                <div class="con_top1_tit">
                    <img src="images/jfjx_title.png" alt="">
                </div>
                <div class="con_top1_con">
                    <a href="javascript:;">
                        中华民族自古以来就重视家庭。“国家”是中华民族特有的概念。“国”和“家”紧密相联，国由家组成，有国才有家；家是国的细胞，家和万事兴。治国从治家开始。“家规”是治家教子、修身处世的重要载体，是中华民族传统文化的重要内容。
                        <br>
                        　　中央纪委监察部网站和客户端推出专题“中国传统中的家规”，带您走近那些充满温情和智慧的传统家规，汲取精华、去除糟粕，延续和弘扬中华民族的“家国”文化；吐故纳新、与时俱进，涵养新时代的良好家风，使千千万万个家庭成为国家发展、民族进步、社会和谐的重要基石。
                    </a>
                </div>
            </div>
            <div class="con_top1">
                <div class="con_top1_tit">
                    <img src="images/jfjx_zhang.png" alt="">
                </div>
                <div class="con_top1_con">
                    <a href="javascript:;">
                        “仁厚遵家法，忠良报国恩。通津为世用，明道守如珍。”1860年张之洞的第一个儿子出生，张之洞便写下这首《续辈诗》，既作为后代子孙的排辈依据，更把修身齐家立业之道和为人处世准则铭刻在每一位张氏后人心中。
                    </a>
                </div>
            </div>
            <div class="container_con_bottom">
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">
                            张之洞：读书寄厚望 教诲启后人
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            一首续辈诗 传承二十代
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container_con_bott clearfix">
            <div class="con_bott_left">
                <div class="map">
                    <img src="images/jfjx_map.png" alt="地址地图">
                </div>
                <div class="detail">
                    <a href="javascript">
                        <img src="images/jfjx_detail.png" alt="">
                    </a>
                </div>
                <div class="people clearfix">
                    <div class="think_img f_fl">
                        <img src="images/jfjx_think.png" alt="">
                    </div>
                    <ul class="f_fl clearfix">
                        <li class="clearfix">
                            <div class="people_one f_fl">
                                <a href="javascript:;">
                                    <img src="images/jfjx_people.jpg" alt="">
                                </a>
                            </div>
                            <div class="people_con f_fl">
                                <a href="javascript:;">
                                    邢东：言传身教 家风传世
                                </a>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="people_one f_fl">
                                <a href="javascript:;">
                                    <img src="images/jfjx_people2.jpg" alt="">
                                </a>
                            </div>
                            <div class="people_con f_fl">
                                <a href="javascript:;">
                                    叶书龙：清廉为官 训子节俭
                                </a>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="people_one f_fl">
                                <a href="javascript:;">
                                    <img src="images/jfjx_people3.jpg" alt="">
                                </a>
                            </div>
                            <div class="people_con f_fl">
                                <a href="javascript:;">
                                    杜中洲：廉吏子孙贫 家风旧如是
                                </a>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="people_one f_fl">
                                <a href="javascript:;">
                                    <img src="images/jfjx_people4.jpg" alt="">
                                </a>
                            </div>
                            <div class="people_con f_fl">
                                <a href="javascript:;">
                                    肖国普：家风家训在孩子们心中生根发芽
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="con_bott_right">
                <div class="bott_right_poem">
                    <div class="con_poem_title clearfix">
                        <span class="f_fl" style="background: url('images/jfjx_icon1.png') no-repeat"></span>
                        <a href="javascript:;" class="f_fr">
                            详细
                        </a>
                    </div>
                    <div class="con_poem_con">
                        <p>
                            <b>续辈诗</b>
                            “仁厚遵家法，忠良报国恩。
                            通津为世用，明道守如珍。”这首《续辈诗》写于1860年（咸丰十年），张之洞及其兄弟后代均按照此诗排辈起名。
                        </p>
                    </div>
                </div>
                <div class="bott_right_poem">
                    <div class="con_poem_title clearfix">
                        <span class="f_fl" style="background: url('images/jfjx_icon2.png') no-repeat"></span>
                        <a href="javascript:;" class="f_fr">
                            详细
                        </a>
                    </div>
                    <div class="con_poem_con">
                        <p>
                            <b>教子警言</b>
                            兄弟不可争产，志须在报国，勤学立品；君子小人，要看得清楚，不可自居下流。
                        </p>
                    </div>
                </div>
                <div class="bott_right_poem">
                    <div class="con_poem_title clearfix">
                        <span class="f_fl" style="background: url('images/jfjx_icon3.png') no-repeat"></span>
                        <a href="javascript:;" class="f_fr">
                            详细
                        </a>
                    </div>
                    <div class="con_poem_con">
                        <p>
                            <b>致儿子书</b>
                            父母爱子，无微不至，其言恨不能一日不离汝，然必令汝出门者，盖欲汝用功上进，为后日国家干城之器、有用之才耳。
                        </p>
                    </div>
                </div>
                <div class="bott_right_poem">
                    <div class="con_poem_title clearfix">
                        <span class="f_fl" style="background: url('images/jfjx_icon4.png') no-repeat"></span>
                        <a href="javascript:;" class="f_fr">
                            详细
                        </a>
                    </div>
                    <div class="con_poem_con">
                        <p>
                            <b>致双亲书</b>
                            大人前次训谕，谓操守宜廉洁，办事宜谨慎，待人宜宽和，此真大人金玉良言，儿虽不肖，敢不永矢勿谖①。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="lunbo clearfix">
            <div class="lunbo_title f_fr">
                <img src="images/jfjx_picture.png" alt="">
            </div>
            <div class="lunbo_con">
                <div id="photos" class="galleryview">
                    <div class="panel">
                        <img src="images/01.jpg"/>
                        <div class="panel-overlay">
                            <h2>Effet du soleil sur le paysage</h2>
                        </div>
                    </div>
                    <div class="panel">
                        <img src="images/02.jpg"/>
                        <div class="panel-overlay">
                            <h2>Eden</h2>
                        </div>
                    </div>
                    <div class="panel">
                        <img src="images/03.jpg"/>
                        <div class="panel-overlay">
                            <h2>Snail on the Corn</h2>
                        </div>
                    </div>
                    <div class="panel">
                        <img src="images/04.jpg"/>
                        <div class="panel-overlay">
                            <h2>Flowers</h2>
                        </div>
                    </div>
                    <div class="panel">
                        <img src="images/05.jpg"/>
                        <div class="panel-overlay">
                            <h2>Alone Beach 2B</h2>
                        </div>
                    </div>
                    <div class="panel">
                        <img src="images/06.jpg"/>
                        <div class="panel-overlay">
                            <h2>Sunrise Trees</h2>
                        </div>
                    </div>
                    <div class="panel">
                        <img src="images/07.jpg"/>
                        <div class="panel-overlay">
                            <h2>Waterfall</h2>
                        </div>
                    </div>
                    <div class="panel">
                        <img src="images/08.jpg"/>
                        <div class="panel-overlay">
                            <h2>Death Valley</h2>
                        </div>
                    </div>
                    <ul class="filmstrip">
                        <li><img src="images/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil"/></li>
                        <li><img src="images/frame-02.jpg" alt="Eden" title="Eden"/></li>
                        <li><img src="images/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn"/></li>
                        <li><img src="images/frame-04.jpg" alt="Flowers" title="Flowers"/></li>
                        <li><img src="images/frame-06.jpg" alt="Alone Beach" title="Alone Beach"/></li>
                        <li><img src="images/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees"/></li>
                        <li><img src="images/frame-07.jpg" alt="Waterfall" title="Waterfall"/></li>
                        <li><img src="images/frame-08.jpg" alt="Death Valley" title="Death Valley"/></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <img src="images/prev.png" alt="" style="display: none">
    <img src="images/next.png" alt="" style="display: none">
    <img src="images/pointer.png" alt="" style="display: none">
</div>

<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.1.2.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#photos').galleryView({
            panel_width: 912,
            panel_height: 600,
            frame_width: 100,
            frame_height: 100,
        });
    });
</script>
</body>
</html>